<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>QQ会员</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			#nav{
				/* width: 1200px; */
				margin: 0 auto;
				/* overflow: hidden; */
				/* border: 1px solid red; */
				background:rgba(0,0,0,0.5);
				height:72px ;
				line-height: 72px;
				text-align: center;
				
			}
			.clear:after{
				clear: both;
				height: 0;
				content: '';
				display: block;
			}
			#nav ul li{
				float: left;
				margin-right: 15px;
				font-size: 15px;
			}
			#nav #logo{
				margin-left: 10px;
			}
			#nav #logo img{
				height: 40%;
				width: 40%;
			}
			#nav ul li a{
				color: white;
			}
			#nav ul li a:hover{
				color: blue;
			}
			#nav ul li.b a{
				color: #FAD65c;
			}
			#nav ul li.b{
				margin-top: 20px;
				width: 80px;
				line-height: 25px;
				height: 30px;
				border-radius: 40px;
				border: 1px solid yellow;
			}
			#nav ul li.b:hover{
				background-color: #FAD65c;
				
			}
			#nav ul li.b2{
				width: 120px;
			}
			#nav ul li.b:hover a{
				color: #986b0D;
			}
		</style>
	</head>
	<body>
		<header id="nav" class="clear">
			<ul>
				<li id="logo">
					<a href="#">
						<img src="img/logo.png"/>
					</a>
				</li>
				<li class="link">
					<a href="#">功能特权</a>
				</li>
				<li  class="link">
					<a href="#">游戏特权</a>
				</li>
				<li class="link"><a href="#">生活特权</a></li>
				<li class="link"><a href="#">会员活动</a></li>
				<li class="link"><a href="#">成长体系</a></li>
				<li class="link"><a href="#">年费专区</a></li>
				<li class="link"><a href="#">超级会员</a></li>
				<li class="b"><a href="#">登录</a></li>
				<li class="b b2"><a href="#">开通超级会员</a></li>
			</ul>
		</header>
	</body>
</html>
